import React from 'react';
import { Modal, CarNo } from 'ywen-mobile-ui';
import PropTypes from 'prop-types';
import BaseComponent from '../../components/common/baseComponent.js';
import { not } from '../../utils/validator';
import toast from '../../utils/toast';
import { debounced } from '../../utils/func';

class GiftModal extends BaseComponent {
  static propTypes = {
    giftFunc: PropTypes.func.isRequired,
    show: PropTypes.bool.isRequired,
    type: PropTypes.oneOf(['sh', 'shell']),
    needCarNo: PropTypes.bool.isRequired,
    closeFunc: PropTypes.func.isRequired,
  }
  state = {
    carNo: '渝',
    keyboardShow: false,
  }

  carNoChanged = (carNo) => {
    this.setState({ carNo });
  }

  showCarNo = () => {
    this.keyboard.show();
    this.setState({ keyboardShow: true });
  }

  keyboardHide = () => {
    this.setState({ keyboardShow: false });
  }

  clickConfirm = debounced(() => {
    const { type, needCarNo, giftFunc } = this.props;
    const { carNo } = this.state;
    if (needCarNo && not('carNo', carNo)) {
      // toast('请输入正确的车牌号');
      giftFunc(type, '');
    } else {
      giftFunc(type, carNo);
    }
  }, 300)

  renderShModal = () => {
    const { needCarNo, closeFunc } = this.props;
    const { carNo } = this.state;
    let inputView;
    if (needCarNo) {
      inputView = <div className="input" onClick={this.showCarNo}>{carNo}</div>;
    }
    return (
      <div className="content">
        {inputView}
        <div className="action-btn" onClick={this.clickConfirm}><div>立即领取</div></div>
        <i className="iconfont icon-close" onClick={closeFunc} />
      </div>
    );
  }

  renderShellModal = () => {
    return this.renderShModal();
  }

  render() {
    const { show, type } = this.props;
    const { keyboardShow } = this.state;
    if (!show) {
      return null;
    }
    return (
      <Modal className={`coupon-gift-modal ${keyboardShow ? 'active' : ''}`}>
        {type === 'sh' ? this.renderShModal() : this.renderShellModal()}
        <CarNo ref={keyboard => this.keyboard = keyboard} onChange={this.carNoChanged} carNo="渝" onClose={this.keyboardHide} />
      </Modal>
    );
  }
}

export default GiftModal;
